<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="75"
          class="search-form"
        >
          <Form-item label="手机号">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入手机号"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="地区" v-show="userEnums == 'MANAGER'">
            <region
              style="width: 350px"
              ref="region"
              :showIs="true"
              @selected="selectedRegion"
            />
          </Form-item>
          <Form-item label="推广人手机号" :label-width="100">
            <Input
              type="text"
              v-model="searchForm.tjMobile"
              placeholder="请输入推广人手机号"
              clearable
            />
          </Form-item>
          <Form-item label="起始时间">
            <DatePicker
              v-model="outSelectDate"
              type="datetimerange"
              format="yyyy-MM-dd"
              clearable
              @on-change="outSelectDateRange"
              placeholder="选择起始时间"
              style="width: 200px"
            >
            </DatePicker>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
          <Button class="search-btn" type="primary" @click="handleReset"
            >重置</Button
          >
          <download-excel
            class="export-excel-wrapper"
            :data="data"
            :fields="fields"
            :fetch="exportOrder"
            name="C端会员统计.xls"
          >
            <Button type="info" class="export"> 导出 </Button>
          </download-excel>
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50, 100]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import { getCMember } from "@/api/report.js";
import region from "@/views/agent-manage/region";
import JsonExcel from "vue-json-excel";
import { getStore, setStore } from "@/libs/storage.js";

export default {
  name: "CMember",
  components: {
    region,
    "download-excel": JsonExcel,
  },
  data() {
    return {
      userEnums: "",
      // 表格的表头以及内容
      fields: {
        会员昵称: "name",
        注册手机号: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        级别: "levelName",
        区域: "region",
        推广人手机号: {
          field: "tjMobile",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        会员费_会员费总额_人民币: {
          field: "dkfXj",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        会员费_会员费总额_焕贝: {
          field: "dkfHb",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_收入_现金充值总额: {
          field: "czSrXj",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_收入_兑换焕贝总额: {
          field: "czSrHb",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_收入_转入: {
          field: "czSrZr",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_支出_消费焕贝总额: {
          field: "czZcXf",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        充值钱包_焕贝余额: {
          field: "czYe",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
      },
      loading: true, // 表单加载状态
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        mobile: "",
        tjMobile: "", //推广人手机号
        startTime: "",
        endTime: "",
        regionId: [],
      },
      outSelectDate: [], // 起止时间
      columns: [
        {
        	title: "序号",
        	align: "center",
        	key: "index",
        	tooltip: true,
        	width: "80",
        }, {
          title: "会员昵称",
          key: "name",
          tooltip: true,
        },
        {
          title: "注册手机号",
          key: "mobile",
        },
        {
          title: "级别",
          key: "levelName",
        },

        {
          title: "区域",
          align: "left",
          key: "region",
        },
        {
          title: "推广人手机号",
          align: "left",
          key: "tjMobile",
        },
        {
          title: "会员费",
          align: "center",
          children: [
            {
              title: "会员费总额",
              align: "center",
              children: [
                {
                  title: "人民币",
                  key: "dkfXj",
                  align: "center",
                },
                {
                  title: "焕贝",
                  key: "dkfHb",
                  align: "center",
                },
              ],
            },
          ],
        },
        {
          title: "充值钱包",
          align: "center",
          children: [
            {
              title: "收入",
              align: "center",
              children: [
                {
                  title: "现金充值总额",
                  align: "center",
                  key: "czSrXj",
                },
                {
                  title: "兑换焕贝总额",
                  key: "czSrHb",
                  align: "center",
                },
                {
                  title: "转入",
                  key: "czSrZr",
                  align: "center",
                },
              ],
            },
            {
              title: "支出",
              align: "center",
              children: [
                {
                  title: "消费焕贝总额",
                  align: "center",
                  key: "czZcXf",
                },
              ],
            },
            {
              title: "焕贝余额",
              key: "czYe",
              align: "center",
            },
          ],
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      allData: {}, //合计数据
    };
  },
  methods: {
    // 导出订单
    async exportOrder() {
      if (this.searchForm.regionId) {
        this.searchForm.regionId = this.searchForm.regionId.toString();
      }
      const params = JSON.parse(JSON.stringify(this.searchForm));
      params.pageNumber = 1;
      params.pageSize = 999999999;
      const result = await getCMember(params);
      if (result.success) {
        if (result.result.page.records.length === 0) {
          this.$Message.warning("暂无可导出数据");
          return [];
        } else {
          return result.result.page.records;
        }
      } else {
        this.$Message.warning("导出数据失败，请重试");
      }
    },
    // 重置
    handleReset() {
      this.outSelectDate = "";
      this.searchForm = {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        mobile: "",
        tjMobile: "", //推广人手机号
        startTime: "",
        endTime: "",
        regionId: [],
      };
      this.$refs.region.addr = [];
      this.getData();
    },
    // 起止时间从新赋值
    outSelectDateRange(v) {
      if (v) {
        this.searchForm.startTime = v[0];
        this.searchForm.endTime = v[1];
      }
    },
    // 选中的地址
    selectedRegion(val) {
      this.searchForm.regionId = val[0];
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    //查询会员列表
    getData() {
      this.loading = true;
      this.searchForm.regionId = this.searchForm.regionId.toString();
      getCMember(this.searchForm).then((res) => {
        if (res.result) {
          this.loading = false;
          this.data = [];
          let data = res.result.page.records
          let allData = res.result.All;
          allData.index = "合计"
          for (let i = 0; i < data.length; i++) {
          	data[i].index = i+1
          }
          data.push(allData)
          this.data = data;
          this.total = res.result.page.total;
        }
      });
    },
  },
  mounted() {
    this.getData();
    this.userEnums = this.getStore("userEnums");
  },
};
</script>
<style lang="scss" scoped>
.export-excel-wrapper {
  margin-left: 10px;
}
/deep/ .ivu-table-wrapper {
  width: 100%;
}

/deep/ .ivu-card {
  width: 100%;
}

.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
.totalCount {
  width: 100%;
  height: auto;
  .countTitle {
    width: 100%;
    height: auto;
    font-weight: bold;
    font-size: 24px;
  }
  .totalList {
    display: flex;
    align-items: center;
    p {
      margin-right: 20px;
      font-size: 18px;
      span {
        margin-left: 10px;
      }
    }
  }
}
</style>
